<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="推广收益" :border-bottom="false" title-color="#333"
				back-icon-color="#333"></u-navbar>
		</view>
		<view class="earning_withdrawal">
			<view class="earning">
				<view class="title">
					累计推荐收益(元)
				</view>
				<view class="price">
					{{cash}}
				</view>
			</view>
			<view class="withdrawal">
				<view class="title">
					累计已经体现(元)
				</view>
				<view class="price">
					{{money}}
				</view>
			</view>
		</view>
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" v-model="current" @change="change" :bar-style="style"
				active-color="#333"></u-tabs>
		</view>
		<view class="listBox" v-if="current==0">
			<view class="item" v-for="(item,index) in listDetail" :key="item.id">
				<view class="top">
					<view class="user">
						<span v-if="item.sto_order_type==1">直推用户</span>
						<span v-else>简推用户</span>
						{{item.sto_order_sn}}购买商品
					</view>
					<view class="price">
						￥{{item.sto_order_amount}}
					</view>
				</view>
				<view class="bottom time">
					{{item.sto_order_crtime}}
				</view>
			</view>
		</view>
		<view class="listBox" v-if="current==1">
			<view class="item" v-for="(item,index) in listDesc" :key="item.id">
				<view class="top">
					<view class="user">
					{{item.cash_stautsname}}
					</view>
					<view class="price">
						￥{{item.cash_amount}}
					</view>
				</view>
				<view class="bottom">
					<view class="time">
						{{item.cash_crtime}}
					</view>
					<view class="result">
						<span v-if="item.cash_status==0">受理中</span>
						<span v-if="item.cash_status==1">代打款</span>
						<span v-if="item.cash_status==2">提现成功</span>
						<span v-if="item.cash_status==3">提现失败</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getwithDrawLog,
		getOrderLog,
		getteamtotal
	} from '@/api/user.js'

	export default {
		data() {
			return {
				list: [{
					name: '收益记录'
				}, {
					name: '提现记录'
				}],
				current: 0,
				style: {
					backgroundColor: "#FB4525"
				},
				listDetail: [],
				listDesc: [],
				cash: "",
				money: ""
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			change(index) {
				console.log(index);
				this.current = index
			},
			initData() {

				getwithDrawLog().then(res => {
					console.log("数据2", res)
					this.listDesc = res.data
				})
				getOrderLog().then(res => {
					console.log("数据", res);
					this.listDetail = res.list
				})
				getteamtotal().then(res => {
					this.cash = res.data.income
					this.money = res.data.cash
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		padding: 1rpx;
		background-color: #f5f5f5;
		width: 750rpx;
		font-family: Source Han Sans CN;
		min-height: 100vh;
		overflow: hidden;
	}

	.earning_withdrawal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;

		.earning,
		.withdrawal {
			display: flex;
			width: 300rpx;
			height: 80rpx;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 28rpx;
				color: #666666;
			}

			.price {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	.tabs {
		margin-top: 20rpx;
	}

	.listBox {
		width: 750rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 20rpx;

		.item {
			border-top: 1rpx solid #dedede;
			padding: 20rpx 0;
		}

		.item .top {
			display: flex;
			justify-content: space-between;
			font-weight: 400;
			font-size: 28rpx;
			color: #121212;
		}

		.item .bottom {
			font-size: 22rpx;
			color: #666666;
			display: flex;
			justify-content: space-between;
		}
	}
</style>